import React, {
    useState,
    useCallback,
    forwardRef,
    useImperativeHandle,
    useEffect,
    useRef
} from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import {
    Card,
    Row,
    Col,
    Input,
    Select,
    Button,
    Space,
    Tag,
    Tree,
    Typography,
    Divider,
    Descriptions,
    Switch,
    Popover,
    Checkbox
} from 'antd'
import type { CheckboxValueType } from 'antd/es/checkbox/Group'
import {
    FilterOutlined,
    DatabaseOutlined,
    ApiOutlined,
    TagsOutlined,
    RightOutlined,
    CloseOutlined,
    DownOutlined
} from '@ant-design/icons'
import type { ListDataItem, TreeDataItem, CompProps, ContRef } from '../types'
import { useHomeContext } from '../context'

const Comp = forwardRef<ContRef, CompProps>((props, ref) => {
    const navigate = useNavigate()
    // 示例：通过 Context 访问其他组件的 refs
    const { refs, setRef } = useHomeContext()
    // 访问其他组件：refs.current['cont']?.goDetail(1)
    const [keyword, setKeyword] = useState<string>('')
    const [category, setCategory] = useState<string | undefined>(undefined)
    const [loading, setLoading] = useState<boolean>(false)
    // 数据源筛选相关状态
    const [dataSourceSearchKeyword, setDataSourceSearchKeyword] = useState<string>('')
    const [selectedDataSources, setSelectedDataSources] = useState<string[]>([])
    const [tempSelectedDataSources, setTempSelectedDataSources] = useState<string[]>([]) // 临时选中状态
    const [dataSourcePopoverVisible, setDataSourcePopoverVisible] = useState<boolean>(false)
    // 数据源列表数据
    const dataSourceList = [
        { name: '治理数据源', count: 459, key: 'govern' },
        { name: 'trino', count: 322, key: 'trino' },
        { name: '订单信息库', count: 216, key: 'order' },
        { name: '军工数据源', count: 15, key: 'military' },
        { name: '军工演示数据源', count: 13, key: 'military-demo' },
        { name: 'cross_db', count: 4, key: 'cross_db' },
        { name: '军丁数据源pa', count: 4, key: 'military-d' }
    ]

    // 元数据类型筛选相关状态
    const [metaTypeSearchKeyword, setMetaTypeSearchKeyword] = useState<string>('')
    const [selectedMetaTypes, setSelectedMetaTypes] = useState<string[]>([])
    const [tempSelectedMetaTypes, setTempSelectedMetaTypes] = useState<string[]>([])
    const [metaTypePopoverVisible, setMetaTypePopoverVisible] = useState<boolean>(false)
    const metaTypeList = [
        { name: '表', count: 120, key: 'table' },
        { name: '视图', count: 45, key: 'view' },
        { name: '字段', count: 320, key: 'field' },
        { name: '函数', count: 18, key: 'function' }
    ]

    // 所有者筛选相关状态
    const [ownerSearchKeyword, setOwnerSearchKeyword] = useState<string>('')
    const [selectedOwners, setSelectedOwners] = useState<string[]>([])
    const [tempSelectedOwners, setTempSelectedOwners] = useState<string[]>([])
    const [ownerPopoverVisible, setOwnerPopoverVisible] = useState<boolean>(false)
    const ownerList = [
        { name: '数据治理团队', count: 280, key: 'govern-team' },
        { name: '业务团队', count: 150, key: 'business-team' },
        { name: '技术团队', count: 95, key: 'tech-team' },
        { name: '产品团队', count: 42, key: 'product-team' }
    ]

    // 分类筛选相关状态
    const [categorySearchKeyword, setCategorySearchKeyword] = useState<string>('')
    const [selectedCategories, setSelectedCategories] = useState<string[]>([])
    const [tempSelectedCategories, setTempSelectedCategories] = useState<string[]>([])
    const [categoryPopoverVisible, setCategoryPopoverVisible] = useState<boolean>(false)
    const categoryList = [
        { name: '业务数据', count: 180, key: 'business' },
        { name: '技术数据', count: 120, key: 'technical' },
        { name: '运营数据', count: 85, key: 'operation' },
        { name: '财务数据', count: 62, key: 'finance' }
    ]

    // 安全筛选相关状态
    const [securitySearchKeyword, setSecuritySearchKeyword] = useState<string>('')
    const [selectedSecurities, setSelectedSecurities] = useState<string[]>([])
    const [tempSelectedSecurities, setTempSelectedSecurities] = useState<string[]>([])
    const [securityPopoverVisible, setSecurityPopoverVisible] = useState<boolean>(false)
    const securityList = [
        { name: '公开', count: 320, key: 'public' },
        { name: '内部', count: 180, key: 'internal' },
        { name: '机密', count: 45, key: 'confidential' },
        { name: '绝密', count: 12, key: 'top-secret' }
    ]
    const [treeData] = useState<TreeDataItem[]>([
        {
            title: '数据库',
            key: 'db',
            icon: <DatabaseOutlined />,
            children: [
                {
                    title: 'mysql',
                    key: 'db-mysql',
                    icon: <DatabaseOutlined />,
                    children: [
                        { title: '订单信息库', key: 'db-mysql-order' },
                        { title: '军工数据源', key: 'db-mysql-mil' },
                        { title: '军工演示数据源', key: 'db-mysql-demo' },
                        { title: '治理数据源', key: 'db-mysql-govern' },
                        { title: 'cross_db', key: 'db-mysql-cross' },
                        { title: 'demo_local', key: 'db-mysql-demo_local' }
                    ]
                }
            ]
        },
        { title: 'APIs', key: 'apis', icon: <ApiOutlined /> },
        {
            title: '标签管理',
            key: 'tags',
            icon: <TagsOutlined />,
            children: [
                { title: '数据标签', key: 'tag-data', count: 8 },
                { title: '分类分级', key: 'tag-category', count: 14 },
                { title: '健康指标', key: 'tag-health', count: 1 }
            ]
        }
    ])
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
        'db',
        'db-mysql',
        'tags'
    ])
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
    const [listData] = useState<ListDataItem[]>([
        {
            id: 1,
            source: 'MySQL/军事态势数据源',
            title: '台湾作战任务态势数据库',
            desc: '军事暨政务大数据中台的核心构成，汇聚了国防工业研发、生产、试验及装备全生命周期数据。其高密敏感性与保密要求，决定了采集、治理及服务必须遵循相应的安全合规框架。',
            tags: ['数据治理团队'],
            visibility: '公开'
        },
        {
            id: 2,
            source: 'MySQL/军事态势数据源',
            title: '装备数据库',
            desc: '汇聚装备研制、试验、生产及服役全生命周期数据，覆盖装备条线核心指标与过程数据。',
            tags: ['数据治理团队'],
            visibility: '公开'
        },
        {
            id: 3,
            source: 'MySQL/军事态势数据源',
            title: '作战目标数据库',
            desc: '围绕作战目标的结构化信息与动态变化，提供目标标识、风险等级等要素数据支撑。',
            tags: ['数据治理团队'],
            visibility: '公开'
        },
        {
            id: 4,
            source: 'MySQL/军事态势数据源',
            title: '台湾作战任务态势数据库',
            desc: '军事暨政务大数据中台的核心构成，汇聚了国防工业研发、生产、试验及装备全生命周期数据。其高密敏感性与保密要求，决定了采集、治理及服务必须遵循相应的安全合规框架。',
            tags: ['数据治理团队'],
            visibility: '公开'
        },
        {
            id: 5,
            source: 'MySQL/军事态势数据源',
            title: '装备数据库',
            desc: '汇聚装备研制、试验、生产及服役全生命周期数据，覆盖装备条线核心指标与过程数据。',
            tags: ['数据治理团队'],
            visibility: '公开'
        },
        {
            id: 6,
            source: 'MySQL/军事态势数据源',
            title: '作战目标数据库',
            desc: '围绕作战目标的结构化信息与动态变化，提供目标标识、风险等级等要素数据支撑。',
            tags: ['数据治理团队'],
            visibility: '公开'
        }
    ])
    const [selected, setSelected] = useState<ListDataItem | null>(null)

    const goDetail = useCallback(
        (id: number) => {
            if (navigate) {
                navigate('/resource/manage/detail', { state: { id } })
            }
        },
        [navigate]
    )

    const handleSearch = useCallback(() => {
        setLoading(true)
        setTimeout(() => setLoading(false), 500)
    }, [])

    const handleExpand = useCallback((expandedKeys: React.Key[]) => {
        setExpandedKeys(expandedKeys)
    }, [])

    const handleSelect = useCallback((selectedKeys: React.Key[]) => {
        setSelectedKeys(selectedKeys)
    }, [])

    const handleCardClick = useCallback((item: ListDataItem) => {
        setSelected(item)
    }, [])

    // 数据源筛选相关方法
    const filteredDataSourceList = dataSourceList.filter(item => 
        item.name.toLowerCase().includes(dataSourceSearchKeyword.toLowerCase())
    )

    const handleDataSourceUpdate = useCallback(() => {
        // 点击更新时才应用临时状态到正式状态
        setSelectedDataSources(tempSelectedDataSources)
        setDataSourcePopoverVisible(false)
        // 这里可以触发数据刷新
    }, [tempSelectedDataSources])

    // Popover 打开/关闭时同步临时状态
    const handlePopoverOpenChange = useCallback((open: boolean) => {
        setDataSourcePopoverVisible(open)
        if (open) {
            // 打开时，将当前选中状态同步到临时状态
            setTempSelectedDataSources(selectedDataSources)
        } else {
            // 关闭时，重置临时状态（不保存修改）
            setTempSelectedDataSources(selectedDataSources)
        }
    }, [selectedDataSources])

    const handleDataSourceClose = useCallback(() => {
        setDataSourcePopoverVisible(false)
        // 关闭时恢复为原始选中状态
        setTempSelectedDataSources(selectedDataSources)
    }, [selectedDataSources])

    const handleDataSourceCheckboxChange = useCallback((checkedValues: CheckboxValueType[]) => {
        // 只更新临时状态，不直接更新选中状态
        setTempSelectedDataSources(checkedValues.map(v => String(v)))
    }, [])

    // 获取选中的数据源名称显示文本（用逗号分隔）
    const getDataSourceDisplayText = useCallback(() => {
        if (selectedDataSources.length === 0) {
            return null // 未选择时返回 null，不显示内容
        }
        const selectedNames = selectedDataSources
            .map(key => dataSourceList.find(item => item.key === key)?.name)
            .filter(Boolean) as string[]
        return selectedNames.join(', ')
    }, [selectedDataSources, dataSourceList])

    // 元数据类型筛选器处理函数
    const handleMetaTypePopoverOpenChange = useCallback((open: boolean) => {
        setMetaTypePopoverVisible(open)
        if (open) {
            setTempSelectedMetaTypes(selectedMetaTypes)
        }
    }, [selectedMetaTypes])
    const handleMetaTypeUpdate = useCallback(() => {
        setSelectedMetaTypes(tempSelectedMetaTypes)
        setMetaTypePopoverVisible(false)
    }, [tempSelectedMetaTypes])
    const handleMetaTypeClose = useCallback(() => {
        setMetaTypePopoverVisible(false)
        setTempSelectedMetaTypes(selectedMetaTypes)
    }, [selectedMetaTypes])
    const handleMetaTypeCheckboxChange = useCallback((checkedValues: CheckboxValueType[]) => {
        setTempSelectedMetaTypes(checkedValues.map(v => String(v)))
    }, [])
    const getMetaTypeDisplayText = useCallback(() => {
        if (selectedMetaTypes.length === 0) return null
        const selectedNames = selectedMetaTypes
            .map(key => metaTypeList.find(item => item.key === key)?.name)
            .filter(Boolean) as string[]
        return selectedNames.join(', ')
    }, [selectedMetaTypes, metaTypeList])

    // 所有者筛选器处理函数
    const handleOwnerPopoverOpenChange = useCallback((open: boolean) => {
        setOwnerPopoverVisible(open)
        if (open) {
            setTempSelectedOwners(selectedOwners)
        }
    }, [selectedOwners])
    const handleOwnerUpdate = useCallback(() => {
        setSelectedOwners(tempSelectedOwners)
        setOwnerPopoverVisible(false)
    }, [tempSelectedOwners])
    const handleOwnerClose = useCallback(() => {
        setOwnerPopoverVisible(false)
        setTempSelectedOwners(selectedOwners)
    }, [selectedOwners])
    const handleOwnerCheckboxChange = useCallback((checkedValues: CheckboxValueType[]) => {
        setTempSelectedOwners(checkedValues.map(v => String(v)))
    }, [])
    const getOwnerDisplayText = useCallback(() => {
        if (selectedOwners.length === 0) return null
        const selectedNames = selectedOwners
            .map(key => ownerList.find(item => item.key === key)?.name)
            .filter(Boolean) as string[]
        return selectedNames.join(', ')
    }, [selectedOwners, ownerList])

    // 分类筛选器处理函数
    const handleCategoryPopoverOpenChange = useCallback((open: boolean) => {
        setCategoryPopoverVisible(open)
        if (open) {
            setTempSelectedCategories(selectedCategories)
        }
    }, [selectedCategories])
    const handleCategoryUpdate = useCallback(() => {
        setSelectedCategories(tempSelectedCategories)
        setCategoryPopoverVisible(false)
    }, [tempSelectedCategories])
    const handleCategoryClose = useCallback(() => {
        setCategoryPopoverVisible(false)
        setTempSelectedCategories(selectedCategories)
    }, [selectedCategories])
    const handleCategoryCheckboxChange = useCallback((checkedValues: CheckboxValueType[]) => {
        setTempSelectedCategories(checkedValues.map(v => String(v)))
    }, [])
    const getCategoryDisplayText = useCallback(() => {
        if (selectedCategories.length === 0) return null
        const selectedNames = selectedCategories
            .map(key => categoryList.find(item => item.key === key)?.name)
            .filter(Boolean) as string[]
        return selectedNames.join(', ')
    }, [selectedCategories, categoryList])

    // 安全筛选器处理函数
    const handleSecurityPopoverOpenChange = useCallback((open: boolean) => {
        setSecurityPopoverVisible(open)
        if (open) {
            setTempSelectedSecurities(selectedSecurities)
        }
    }, [selectedSecurities])
    const handleSecurityUpdate = useCallback(() => {
        setSelectedSecurities(tempSelectedSecurities)
        setSecurityPopoverVisible(false)
    }, [tempSelectedSecurities])
    const handleSecurityClose = useCallback(() => {
        setSecurityPopoverVisible(false)
        setTempSelectedSecurities(selectedSecurities)
    }, [selectedSecurities])
    const handleSecurityCheckboxChange = useCallback((checkedValues: CheckboxValueType[]) => {
        setTempSelectedSecurities(checkedValues.map(v => String(v)))
    }, [])
    const getSecurityDisplayText = useCallback(() => {
        if (selectedSecurities.length === 0) return null
        const selectedNames = selectedSecurities
            .map(key => securityList.find(item => item.key === key)?.name)
            .filter(Boolean) as string[]
        return selectedNames.join(', ')
    }, [selectedSecurities, securityList])

    // 筛选后的列表
    const filteredMetaTypeList = metaTypeList.filter(item => 
        item.name.toLowerCase().includes(metaTypeSearchKeyword.toLowerCase())
    )
    const filteredOwnerList = ownerList.filter(item => 
        item.name.toLowerCase().includes(ownerSearchKeyword.toLowerCase())
    )
    const filteredCategoryList = categoryList.filter(item => 
        item.name.toLowerCase().includes(categorySearchKeyword.toLowerCase())
    )
    const filteredSecurityList = securityList.filter(item => 
        item.name.toLowerCase().includes(securitySearchKeyword.toLowerCase())
    )

    // 暴露给父组件的方法 - 使用 useMemo 优化，避免每次渲染都重新创建
    const refValue = React.useMemo<ContRef>(() => ({
        goDetail,
        handleSearch,
        setKeyword,
        setCategory,
        setSelected,
        getSelected: () => selected,
        getKeyword: () => keyword,
        getCategory: () => category
    }), [goDetail, handleSearch, selected, keyword, category, setKeyword, setCategory, setSelected])

    useImperativeHandle(ref, () => refValue, [refValue])

    // 注册当前组件的 ref 到 Context
    // 注意：由于子组件已经自己注册，父组件的 useEffect 注册是冗余的，但保留作为备用
    useEffect(() => {
        setRef('cont', refValue)
    }, [setRef, refValue])

    useEffect(() => {
        // refs.current['cont']?.goDetail(1)
    }, [])

    const { Title, Text, Paragraph } = Typography

    return (
        <div className={styles['cont-root']}>
            <Row
                gutter={12}
                align="top"
                wrap={false}
                style={{ height: '100%' }}
            >
                <Col flex="300px" style={{ height: '100%' }}>
                    <Card className={styles['cont-side']} bordered>
                        <Tree
                            blockNode
                            // showLine={{ showLeafIcon: false }}
                            switcherIcon={<RightOutlined />}
                            treeData={treeData}
                            expandedKeys={expandedKeys}
                            selectedKeys={selectedKeys}
                            onExpand={handleExpand}
                            onSelect={handleSelect}
                            titleRender={(node) => (
                                <div className={styles['tree-item']}>
                                    <span className={styles['tree-title']}>
                                        {node.icon ? (
                                            <span className="tree-icon">
                                                {node.icon}
                                            </span>
                                        ) : null}
                                        {node.title}
                                    </span>
                                    {typeof (node as TreeDataItem).count ===
                                    'number' ? (
                                        <span className={styles['tree-count']}>
                                            {(node as TreeDataItem).count}
                                        </span>
                                    ) : null}
                                </div>
                            )}
                        />
                    </Card>
                </Col>
                {/* Right side container: header spans list + detail */}
                <Col flex="auto" style={{ height: '100%' }}>
                    <div className={styles['cont-right']}>
                        <div className={styles['cont-header']}>
                            <div className={styles['cont-header-left']}>
                                <Space size={16} wrap>
                                    {/* 元数据类型筛选 */}
                                    <Popover
                                        content={
                                            <div className={styles['data-source-filter']}>
                                                <div className={styles['data-source-search']}>
                                                    <Input
                                                        placeholder="搜索..."
                                                        value={metaTypeSearchKeyword}
                                                        onChange={(e) => setMetaTypeSearchKeyword(e.target.value)}
                                                        allowClear
                                                    />
                                                </div>
                                                <div className={styles['data-source-list']}>
                                                    <Checkbox.Group
                                                        value={tempSelectedMetaTypes}
                                                        onChange={handleMetaTypeCheckboxChange}
                                                    >
                                                        {filteredMetaTypeList.map(item => (
                                                            <div key={item.key} className={styles['data-source-item']}>
                                                                <Checkbox value={item.key}>
                                                                    {item.name}
                                                                </Checkbox>
                                                                <span className={styles['data-source-count']}>
                                                                    {item.count}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </Checkbox.Group>
                                                </div>
                                                <div className={styles['data-source-actions']}>
                                                    <Button onClick={handleMetaTypeClose}>关闭</Button>
                                                    <Button type="primary" onClick={handleMetaTypeUpdate}>更新</Button>
                                                </div>
                                            </div>
                                        }
                                        trigger="click"
                                        open={metaTypePopoverVisible}
                                        onOpenChange={handleMetaTypePopoverOpenChange}
                                        placement="bottomLeft"
                                    >
                                        <Button type="text" className={styles['data-source-trigger']}>
                                            {selectedMetaTypes.length > 0 ? (
                                                <>
                                                    <span className={styles['data-source-label']}>元数据类型:</span>
                                                    <span className={styles['data-source-trigger-text']}>
                                                        {getMetaTypeDisplayText()}
                                                    </span>
                                                </>
                                            ) : (
                                                <span className={styles['data-source-placeholder']}>元数据类型</span>
                                            )}
                                            <DownOutlined className={styles['data-source-arrow']} />
                                        </Button>
                                    </Popover>

                                    {/* 所有者筛选 */}
                                    <Popover
                                        content={
                                            <div className={styles['data-source-filter']}>
                                                <div className={styles['data-source-search']}>
                                                    <Input
                                                        placeholder="搜索..."
                                                        value={ownerSearchKeyword}
                                                        onChange={(e) => setOwnerSearchKeyword(e.target.value)}
                                                        allowClear
                                                    />
                                                </div>
                                                <div className={styles['data-source-list']}>
                                                    <Checkbox.Group
                                                        value={tempSelectedOwners}
                                                        onChange={handleOwnerCheckboxChange}
                                                    >
                                                        {filteredOwnerList.map(item => (
                                                            <div key={item.key} className={styles['data-source-item']}>
                                                                <Checkbox value={item.key}>
                                                                    {item.name}
                                                                </Checkbox>
                                                                <span className={styles['data-source-count']}>
                                                                    {item.count}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </Checkbox.Group>
                                                </div>
                                                <div className={styles['data-source-actions']}>
                                                    <Button onClick={handleOwnerClose}>关闭</Button>
                                                    <Button type="primary" onClick={handleOwnerUpdate}>更新</Button>
                                                </div>
                                            </div>
                                        }
                                        trigger="click"
                                        open={ownerPopoverVisible}
                                        onOpenChange={handleOwnerPopoverOpenChange}
                                        placement="bottomLeft"
                                    >
                                        <Button type="text" className={styles['data-source-trigger']}>
                                            {selectedOwners.length > 0 ? (
                                                <>
                                                    <span className={styles['data-source-label']}>所有者:</span>
                                                    <span className={styles['data-source-trigger-text']}>
                                                        {getOwnerDisplayText()}
                                                    </span>
                                                </>
                                            ) : (
                                                <span className={styles['data-source-placeholder']}>所有者</span>
                                            )}
                                            <DownOutlined className={styles['data-source-arrow']} />
                                        </Button>
                                    </Popover>

                                    {/* 分类筛选 */}
                                    <Popover
                                        content={
                                            <div className={styles['data-source-filter']}>
                                                <div className={styles['data-source-search']}>
                                                    <Input
                                                        placeholder="搜索..."
                                                        value={categorySearchKeyword}
                                                        onChange={(e) => setCategorySearchKeyword(e.target.value)}
                                                        allowClear
                                                    />
                                                </div>
                                                <div className={styles['data-source-list']}>
                                                    <Checkbox.Group
                                                        value={tempSelectedCategories}
                                                        onChange={handleCategoryCheckboxChange}
                                                    >
                                                        {filteredCategoryList.map(item => (
                                                            <div key={item.key} className={styles['data-source-item']}>
                                                                <Checkbox value={item.key}>
                                                                    {item.name}
                                                                </Checkbox>
                                                                <span className={styles['data-source-count']}>
                                                                    {item.count}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </Checkbox.Group>
                                                </div>
                                                <div className={styles['data-source-actions']}>
                                                    <Button onClick={handleCategoryClose}>关闭</Button>
                                                    <Button type="primary" onClick={handleCategoryUpdate}>更新</Button>
                                                </div>
                                            </div>
                                        }
                                        trigger="click"
                                        open={categoryPopoverVisible}
                                        onOpenChange={handleCategoryPopoverOpenChange}
                                        placement="bottomLeft"
                                    >
                                        <Button type="text" className={styles['data-source-trigger']}>
                                            {selectedCategories.length > 0 ? (
                                                <>
                                                    <span className={styles['data-source-label']}>分类:</span>
                                                    <span className={styles['data-source-trigger-text']}>
                                                        {getCategoryDisplayText()}
                                                    </span>
                                                </>
                                            ) : (
                                                <span className={styles['data-source-placeholder']}>分类</span>
                                            )}
                                            <DownOutlined className={styles['data-source-arrow']} />
                                        </Button>
                                    </Popover>

                                    {/* 安全筛选 */}
                                    <Popover
                                        content={
                                            <div className={styles['data-source-filter']}>
                                                <div className={styles['data-source-search']}>
                                                    <Input
                                                        placeholder="搜索..."
                                                        value={securitySearchKeyword}
                                                        onChange={(e) => setSecuritySearchKeyword(e.target.value)}
                                                        allowClear
                                                    />
                                                </div>
                                                <div className={styles['data-source-list']}>
                                                    <Checkbox.Group
                                                        value={tempSelectedSecurities}
                                                        onChange={handleSecurityCheckboxChange}
                                                    >
                                                        {filteredSecurityList.map(item => (
                                                            <div key={item.key} className={styles['data-source-item']}>
                                                                <Checkbox value={item.key}>
                                                                    {item.name}
                                                                </Checkbox>
                                                                <span className={styles['data-source-count']}>
                                                                    {item.count}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </Checkbox.Group>
                                                </div>
                                                <div className={styles['data-source-actions']}>
                                                    <Button onClick={handleSecurityClose}>关闭</Button>
                                                    <Button type="primary" onClick={handleSecurityUpdate}>更新</Button>
                                                </div>
                                            </div>
                                        }
                                        trigger="click"
                                        open={securityPopoverVisible}
                                        onOpenChange={handleSecurityPopoverOpenChange}
                                        placement="bottomLeft"
                                    >
                                        <Button type="text" className={styles['data-source-trigger']}>
                                            {selectedSecurities.length > 0 ? (
                                                <>
                                                    <span className={styles['data-source-label']}>安全:</span>
                                                    <span className={styles['data-source-trigger-text']}>
                                                        {getSecurityDisplayText()}
                                                    </span>
                                                </>
                                            ) : (
                                                <span className={styles['data-source-placeholder']}>安全</span>
                                            )}
                                            <DownOutlined className={styles['data-source-arrow']} />
                                        </Button>
                                    </Popover>
                                    <Popover
                                        content={
                                            <div className={styles['data-source-filter']}>
                                                <div className={styles['data-source-search']}>
                                                    <Input
                                                        placeholder="搜索数据源..."
                                                        value={dataSourceSearchKeyword}
                                                        onChange={(e) => setDataSourceSearchKeyword(e.target.value)}
                                                        allowClear
                                                    />
                                                </div>
                                                <div className={styles['data-source-list']}>
                                                    <Checkbox.Group
                                                        value={tempSelectedDataSources}
                                                        onChange={handleDataSourceCheckboxChange}
                                                    >
                                                        {filteredDataSourceList.map(item => (
                                                            <div key={item.key} className={styles['data-source-item']}>
                                                                <Checkbox value={item.key}>
                                                                    {item.name}
                                                                </Checkbox>
                                                                <span className={styles['data-source-count']}>
                                                                    {item.count}
                                                                </span>
                                                            </div>
                                                        ))}
                                                    </Checkbox.Group>
                                                </div>
                                                <div className={styles['data-source-actions']}>
                                                    <Button
                                                        type="primary"
                                                        onClick={handleDataSourceUpdate}
                                                        style={{ marginRight: 8 }}
                                                    >
                                                        更新
                                                    </Button>
                                                    <Button onClick={handleDataSourceClose}>
                                                        关闭
                                                    </Button>
                                                </div>
                                            </div>
                                        }
                                        trigger="click"
                                        open={dataSourcePopoverVisible}
                                        onOpenChange={handlePopoverOpenChange}
                                        placement="bottomLeft"
                                    >
                                        <Button
                                            type="text"
                                            className={styles['data-source-trigger']}
                                        >
                                            {selectedDataSources.length > 0 ? (
                                                <>
                                                    <span className={styles['data-source-label']}>数据源类型 :</span>
                                                    <span className={styles['data-source-trigger-text']}>
                                                        {getDataSourceDisplayText()}
                                                    </span>
                                                </>
                                            ) : (
                                                <span className={styles['data-source-placeholder']}>数据源类型</span>
                                            )}
                                            <DownOutlined className={styles['data-source-arrow']} />
                                        </Button>
                                    </Popover>
                                </Space>
                            </div>
                            <div className={styles['cont-header-right']}>
                                <Space size={16} align="center">
                                    <Space size={8}>
                                        <Switch size="small" />
                                        <div style={{ minWidth: '44px' }}>
                                            已删除
                                        </div>
                                    </Space>
                                    <Button
                                        type="text"
                                        icon={<FilterOutlined />}
                                    />
                                    <Select
                                        bordered={false}
                                        defaultValue={'popularity'}
                                        style={{ width: 120 }}
                                        options={[
                                            {
                                                label: '受欢迎程度',
                                                value: 'popularity'
                                            },
                                            {
                                                label: '更新时间',
                                                value: 'updatedAt'
                                            }
                                        ]}
                                    />
                                </Space>
                            </div>
                        </div>
                        <Row
                            gutter={12}
                            align="top"
                            wrap={false}
                            style={{ flex: '1' }}
                        >
                            <Col flex="auto" style={{ height: '100%' }}>
                                <div className={styles['cont-list']}>
                                    <div className={styles['cont-listBody']}>
                                        {listData.map((item) => (
                                            <Card
                                                key={item.id}
                                                hoverable
                                                className={`${
                                                    styles['cont-card']
                                                } ${
                                                    selected &&
                                                    selected.id === item.id
                                                        ? styles['activeCard']
                                                        : ''
                                                }`}
                                                onClick={() =>
                                                    handleCardClick(item)
                                                }
                                                bordered={false}
                                            >
                                                <div
                                                    className={
                                                        styles[
                                                            'cont-card-header'
                                                        ]
                                                    }
                                                >
                                                    {item.source}
                                                </div>
                                                <div
                                                    className={
                                                        styles[
                                                            'cont-card-title'
                                                        ]
                                                    }
                                                >
                                                    <a
                                                        onClick={(e) => {
                                                            e.stopPropagation()
                                                            goDetail(item.id)
                                                        }}
                                                    >
                                                        {item.title}
                                                    </a>
                                                </div>
                                                <div
                                                    className={
                                                        styles['cont-card-desc']
                                                    }
                                                >
                                                    {item.desc}
                                                </div>
                                                <div
                                                    className={
                                                        styles[
                                                            'cont-card-footer'
                                                        ]
                                                    }
                                                >
                                                    <Space size={8} wrap>
                                                        <Button
                                                            size="small"
                                                            onClick={(e) => {
                                                                e.stopPropagation()
                                                                goDetail(
                                                                    item.id
                                                                )
                                                            }}
                                                        >
                                                            军事态势数据源
                                                        </Button>
                                                        {item.tags.map((t) => (
                                                            <Button
                                                                key={t}
                                                                size="small"
                                                                onClick={(
                                                                    e
                                                                ) => {
                                                                    e.stopPropagation()
                                                                    goDetail(
                                                                        item.id
                                                                    )
                                                                }}
                                                            >
                                                                {t}
                                                            </Button>
                                                        ))}
                                                        <Tag color="blue">
                                                            {item.visibility}
                                                        </Tag>
                                                    </Space>
                                                </div>
                                            </Card>
                                        ))}
                                    </div>
                                </div>
                            </Col>
                            <Col flex="360px" style={{ height: '100%' }}>
                                <Card
                                    className={styles['cont-detail']}
                                    bordered
                                    title={
                                        selected ? (
                                            <Text strong>{selected.title}</Text>
                                        ) : (
                                            '选择数据源'
                                        )
                                    }
                                >
                                    {!selected ? (
                                        <Text type="secondary">
                                            请在列表中选择一个数据源查看详情
                                        </Text>
                                    ) : (
                                        <>
                                            <Descriptions
                                                column={1}
                                                size="small"
                                                labelStyle={{ width: 80 }}
                                            >
                                                <Descriptions.Item label="所有者">
                                                    数据治理团队
                                                </Descriptions.Item>
                                                <Descriptions.Item label="数据源">
                                                    军事态势数据源
                                                </Descriptions.Item>
                                                <Descriptions.Item label="数据库">
                                                    MySQL
                                                </Descriptions.Item>
                                                <Descriptions.Item label="分类/安全">
                                                    <Space size={6}>
                                                        <Tag color="gold">
                                                            气象环境
                                                        </Tag>
                                                        <Tag>公开</Tag>
                                                    </Space>
                                                </Descriptions.Item>
                                            </Descriptions>
                                            <Divider />
                                            <Title level={5}>描述：</Title>
                                            <Paragraph
                                                className={
                                                    styles['cont-detail-desc']
                                                }
                                            >
                                                本数据库体来自三个主题层组成：
                                                1.
                                                任务编组，存储作战任务目标信息，如作战任务集、任务目标等；
                                                2.
                                                战术条件，存储作战目标标识、目标编号、风险等级等；
                                                3.
                                                单位信息，存储作战单位与人员信息，包含单位表、作战单位表。
                                            </Paragraph>
                                        </>
                                    )}
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </Col>
            </Row>
        </div>
    )
})

Comp.displayName = 'Cont'

export default Comp
